<template>
    <el-form label-position="left" status-icon :hide-required-asterisk="true"
             ref="formRef" :model="form" :rules="rules">
        <el-form-item prop="telephone">
            <el-input size="large" clearable placeholder="请输入手机号" v-model="form.telephone">
                <template #prefix>
                    <el-icon :size="23">
                        <User/>
                    </el-icon>
                </template>
            </el-input>
        </el-form-item>
        <el-form-item prop="password">
            <el-input size="large" type="password" show-password placeholder="请输入密码"
                      v-model="form.password">
                <template #prefix>
                    <el-icon :size="23">
                        <Lock/>
                    </el-icon>
                </template>
            </el-input>
        </el-form-item>
        <el-form-item prop="confirmPassword">
            <el-input size="large" type="password" show-password placeholder="确认密码必须与注册的密码一致"
                      v-model="form.confirmPassword">
                <template #prefix>
                    <el-icon :size="23">
                        <Lock/>
                    </el-icon>
                </template>
            </el-input>
        </el-form-item>
        <el-form-item prop="verifyCode">
            <template #label>
                <img class="login-code" :src="urlKaptcha" alt="验证码"
                     ref="imgKaptcha" @click="changeKAP"/>
            </template>
            <el-input type="text" v-model="form.verifyCode" placeholder="验证码"/>
        </el-form-item>
        <el-form-item prop="authority">
            <el-radio-group v-model="form.authority">
                <el-radio :label="3">我是学生</el-radio>
                <el-radio :label="2">我是老师</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item>
            <el-button style="width: 100%" size="large" type="success" @click="register(formRef)">注册</el-button>
        </el-form-item>
        <div style="display: flex;justify-content: space-between;">
            <el-button link @click="$emit('update:tab','login')">去登录</el-button>
        </div>
    </el-form>
</template>

<script setup>
import {reactive, ref} from 'vue'

import {useRouter} from "vue-router";
import {Lock, User} from "@element-plus/icons-vue";
import {registerByTelephoneApi} from "@/apis/account";
import {ElMessage} from "element-plus";

const router = useRouter()

const emits = defineEmits(["update:tab"])

const form = reactive({
    telephone: '',
    email:'',
    password: '',
    confirmPassword:'',
    verifyCode: '',
    authority:''
})

const rules = {
    telephone: [
        {required: true, message: '手机号不能为空', trigger: ['blur','change']},
        {
            validator: (rule, value) => /^1[3456789]\d{9}$/.test(value),
            message: "手机号不合法",
            trigger: ['blur','change']
        }
    ],
    password: [
        {required: true, message: '密码不能为空', trigger: ['blur','change']}
    ],
    confirmPassword: [
        {required: true, message: '密码不能为空', trigger: ['blur','change']},
        {required: true, message: '请输入确认密码', trigger: ['blur','change']},
        {
            validator: (rule, value) => form.password === value,
            message: "确认密码必须与注册的密码一致!",
            trigger: ['blur','change']
        }
    ],
    verifyCode: [
        {required: true, message: '验证码不能为空', trigger: ['blur','change']},
    ],
    authority: [
        {required: true, message: '身份不能为空', trigger: ['blur','change']}
    ],
}

const imgKaptcha = ref(null)
const urlKaptcha = "/api/common/kaptcha"

//更改验证码
function changeKAP() {
    imgKaptcha.value.src = `${urlKaptcha}?${Math.random()}`
}

const formRef = ref(null)
// 用户注册
const register = formEL => {
    formEL.validate(async (valid) => {
        if (valid) {
            const res = await registerByTelephoneApi(form)
            if (res.code === 200) {
                ElMessage({
                    message: "注册成功",
                    type: 'success',
                    offset: window.innerHeight / 2,
                })
                emits('update:tab','login')
            }
        }
    })
}
</script>

<style scoped>
.login-code {
    cursor: pointer;
}
.el-radio-group{
    width: 100%;
    justify-content: space-between;
}
</style>